<template>
  <div>
    <Form ref="ruleValidate" :model="advanceSaleData" :rules="ruleValidate" :label-width="170">
      <Form-item label="产品类型：" prop="proType">
        <p>{{$formatter.switchName('productType',productType)}}</p>
      </Form-item>
      <Form-item label="楼栋号：" prop="buildingNo">
        <p>{{buildingNameList}}</p>
      </Form-item>
      <Form-item label="*预计预售证上传日期：" prop="preSaleDate">
        <DatePicker :options="options3" type="date" v-model="advanceSaleData.preSaleDate"
          @on-change="timeChange" placeholder="请选择日期"></DatePicker>
      </Form-item>

      <Form-item label="附件资料：" prop="basicPrice">
        <Tag v-for="(item,index) in uploadFileList" :key="index" closable
          @on-close="uploadFileListClose(index)">{{item.imageName}}</Tag>
        <Upload style="margin-top:5px;" multiple :max-size="10240"
          :on-exceeded-size="handleMaxSize" :action="upload.reqUrl" ref="upload"
          name="multipartFile" :headers="upload.headers" :show-upload-list="false"
          :on-success="handleSuccess">
          <Button icon="ios-cloud-upload-outline" size='small'>上传文件</Button>
        </Upload>
      </Form-item>
      <Form-item label="提前开售原因：" prop="reason">
        <Input v-model="advanceSaleData.reason" type="textarea" :rows="4" :maxlength="300"
          placeholder="请输入备注..." />

      </Form-item>
      <Form-item class="btn-operate">
        <Button @click="handleClose">取消</Button>
        <Button type="primary" @click="applyPreSale" style="margin-left: 8px">提交</Button>
      </Form-item>
    </Form>
  </div>
</template>
<script>
  import preSaleMgr from '@/biz/advanceSaleReview/advanceSaleReview'
  import toolMgr from '@/biz/base/tool.js'
  export default {
    props: ['productType', 'selectionArr'],
    data() {
      return {
        upload: toolMgr.unloadImage(),
        options3: {
          disabledDate(date) {
            return date && date.valueOf() < Date.now() - 86400000
          },
        },
        buildingNameList: '', //预售楼栋名
        buildingIdList: '', //预售楼栋名

        uploadFileList: [],
        advanceSaleData: {
          preSaleDate: '',
          reason: '',
        },
        ruleValidate: {
          preSaleDate: [
          {
            trigger: 'blur',
            required: true,
            message: '请选择预计预售证上传日期',
          }, ],
          reason: [
            { trigger: 'blur', required: true, message: '请说明提前开售原因' },
          ],
        },
      }
    },
    watch: {
      productType(newVal) {
        this.productType = newVal
      },
      selectionArr(newVal) {
        this.selectionArr = newVal

        let arrList = []
        let buildingIdList = []
        this.selectionArr.forEach((item) => {
          arrList.push(item.buildingName)
          buildingIdList.push(item.buildingId)
        })
        this.buildingNameList = arrList.join('、')
        this.buildingIdList = buildingIdList
      },
    },
    methods: {
      timeChange(val) {
        this.advanceSaleData.preSaleDate = val
      },
      applyPreSale() {
        this.$refs.ruleValidate.validate((valid) => {
          if (valid) {
            let params = {
              buildingIds: this.buildingIdList, //楼栋主键
              imageVOS: this.uploadFileList, //上传的附件列表
              preUploadDate: this.advanceSaleData.preSaleDate, //预计预售证上传日期
              productId: this.productType, //所属产品id
              reason: this.advanceSaleData.reason, //提前开售原因
            }
            preSaleMgr.preSale(params).then((res) => {
              this.handleClose()
              this.$emit('initData')
            })
          }
        })
      },
      handleClose() {
        this.$emit('cancelClose')
        this.uploadFileList = []
        this.advanceSaleData = {
          preSaleDate: '',
          reason: '',
        }
      },

      uploadFileListClose(index) {
        this.uploadFileList.splice(index, 1)
      },

      handleMaxSize(file) {
        this.$Message.warning('最大支持10M。')
      },

      handleSuccess(res, file) {
        this.uploadFileList.push({
          imageURL: res.data.imageURL,
          imageName: file.name,
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
</style>